Skip to main content

Project Structure

Understanding the SvelteBolt folder structure to help you navigate and modify the codebase effectively.

Folder Tree​

sveltebolt/
├── src/                          # Main application source code
│   ├── routes/                   # 🔥 SvelteKit routes (pages)
│   │   ├── (landing)/           # Landing page routes
│   │   │   ├── +page.svelte     # Homepage
│   │   │   └── contact/         # Contact page
│   │   ├── auth/                # Authentication routes
│   │   │   ├── login/           # Login page
│   │   │   └── signup/          # Signup page
│   │   ├── dashboard/           # 🔥 Protected dashboard routes
│   │   │   ├── +page.svelte     # Dashboard home
│   │   │   ├── settings/        # Settings pages
│   │   │   └── premium-feature/ # Premium content example
│   │   ├── api/                 # API endpoints
│   │   │   ├── auth/            # Auth API routes
│   │   │   └── stripe/          # Stripe webhook handlers
│   │   ├── legal/               # Legal pages
│   │   ├── payment/             # Payment success/cancel pages
│   │   ├── +layout.svelte       # Root layout
│   │   └── +layout.server.ts    # Server-side layout logic
│   ├── lib/                     # 🔥 Shared utilities and components
│   │   ├── components/          # Reusable UI components
│   │   │   ├── ui/              # shadcn-svelte components
│   │   │   ├── landing/         # Landing page components
│   │   │   ├── login-form.svelte
│   │   │   ├── signup-form.svelte
│   │   │   └── app-sidebar.svelte
│   │   ├── server/              # Server-side utilities
│   │   │   ├── database.ts      # Supabase client setup
│   │   │   └── stripe.ts        # Stripe configuration
│   │   ├── stripe/              # Stripe utilities
│   │   ├── config.ts            # 🔥 App configuration
│   │   └── utils.ts             # Utility functions
│   ├── app.css                  # Global styles
│   ├── app.html                 # HTML template
│   └── hooks.server.ts          # 🔥 Server hooks for auth
├── static/                      # Static assets
│   ├── favicon.ico
│   └── avatars/                 # User avatar images
├── supabase/                    # Database configuration
│   ├── config.toml              # Supabase project config
│   └── migrations/              # Database migrations
├── .env.example                 # Environment variables template
├── package.json                 # Dependencies and scripts
├── svelte.config.js             # SvelteKit configuration
├── tailwind.config.js           # Tailwind CSS configuration
├── tsconfig.json                # TypeScript configuration
└── vite.config.ts               # Vite build configuration

Key Files to Modify​

🔥 Most Important Files​

  1. src/lib/config.ts - App configuration, API keys, and settings
  2. src/hooks.server.ts - Authentication logic and session handling
  3. src/routes/+layout.server.ts - Global server-side data loading
  4. supabase/migrations/ - Database schema and tables

Core Routes Structure​

  • src/routes/(landing)/+page.svelte - Landing page
  • src/routes/dashboard/+page.svelte - Dashboard home
  • src/routes/auth/ - Authentication pages
  • src/routes/api/ - Backend API endpoints

Component Organization​

  • src/lib/components/ui/ - Base UI components (shadcn-svelte)
  • src/lib/components/landing/ - Landing page specific components
  • src/lib/components/*.svelte - Shared form and layout components

Configuration Files​

  • .env - Environment variables (create from .env.example)
  • supabase/config.toml - Supabase project configuration
  • tailwind.config.js - UI styling configuration

Route Patterns​

SvelteBolt uses SvelteKit's file-based routing:

  • (landing) - Route group for public pages
  • dashboard - Protected routes requiring authentication
  • api - Server-side API endpoints
  • +page.svelte - Page component
  • +layout.svelte - Layout wrapper
  • +page.server.ts - Server-side page logic

Next Steps​